<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-logo-menu"></i>商店</el-breadcrumb-item>
                <el-breadcrumb-item>评价管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="crumbs clearfix">
            <div class="left filter-item">
                <!-- 学校： -->
                <el-select clearable v-model="listQuery.param.schoolId" 
                :disabled="rid!=1"
                placeholder="请选择学校">
                    <el-option
                    v-for="item in schoolOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="left filter-item">
                <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="店铺名" v-model="listQuery.param.shopName" :disabled="rid!=1">
                </el-input>
            </div>
            <div class="left filter-item">
                <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="商品名" v-model="listQuery.param.productName">
                </el-input>
            </div>
            <el-button class="left filter-item" style="margin-left: 30px;" type="primary" icon="search" @click="handleFilter">搜索</el-button>
        </div>
        <div style="float: right">
           <!--  <el-button @click="add" type="primary"><i class="el-logo-plus"></i> 添加</el-button> -->
            <!-- <el-button @click="del()" type="primary" logo="delete">删除</el-button> -->
        </div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" >
            <el-table-column type="selection" width="auto"  min-width="40spx" :disabled="true">
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" min-width="160spx" :disabled="true">
            </el-table-column>
            <el-table-column prop="shopName" label="店铺名称" min-width="160spx" :disabled="true">
            </el-table-column>
            <el-table-column prop="content" label="评论内容" min-width="160spx" :disabled="true">
            </el-table-column>
            <el-table-column prop="score" label="评分" min-width="250spx" :disabled="true">
                <template scope="scope">
                <el-rate
                  v-model="scope.row.score"
                  disabled
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="imgs" label="图片" min-width="160spx" :disabled="true">
                <template scope="scope">
                    <img :src="scope.row.imgs" width="100" height="100">
                </template>
            </el-table-column> -->
            <el-table-column prop="createDateName" label="评论时间" min-width="180spx" :disabled="true">
            </el-table-column>
            <el-table-column label="操作" min-width="199spx">
                <template scope="scope">
                    <el-button size="small"
                            @click="handleEdit(scope.$index, scope.row)">回复</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="listQuery.pageNumber"
               :page-sizes="[10, 20, 50]"
               :page-size="listQuery.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="dailogTitle" :visible.sync="dialogVisible">
            <div style="text-align:center;">
                <div style="text-align:left;width:90%;margin:0 auto;">
                    <el-form :model="entityForm" :rules="rules" ref="entityForm" label-width="100px" class="demo-ruleForm" style="width:90%;">
                         <el-form-item prop="id"  style="display:none;">
                           <el-input v-model="entityForm.id" placeholder="编号"  :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item prop="replyContent" label="回复">
                           <el-input type="textarea" v-model="entityForm.replyContent" placeholder="内容"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div style="clear:both;"></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button  type="primary" @click="update(entityForm.id)">回复</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import $ from 'jquery';

    export default {
        data() {
            return {
                rid: null,
                school: null,
                shop: null,
                userData: null,
                tableData: [
                    {
                        id:'',
                        user_id: '15623885110',
                        person_name: '123456',
                        phone:'',
                        postal_code:'',
                        area_code:'',
                        address:'',
                        status:'',
                        create_date:'',
                    }
                ],
                schoolOptions: [],
                shopSelectOptions: [],
                shopTypeOption: [],
                total: 10,
                // propretis for search
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10,
                    param: {
                        schoolId: null,
                        shopId: null,
                        productName: null,
                        shopName: null,
                    },
                },
                searchData:{},
                // propretis for dailog
                dailogTitle: '',
                editDialogFormVisible: false,
                addDialogFormVisible: false,
                // record for input
                entityForm: {
                    id:'',
                    realName: '15623885110',
                    phone: '123456',
                    areaCode:'',
                    address:'',
                    cardNum:'',
                    cardFrontImg:'',
                    cardBackImg:'',
                    verifyStatus:'',
                    verifyUserId:'',    //审核
                    verifyDate:'',        //审核日期
                    verifyRemark:''    //
                },
                rules: {
                    name: [
                        {required: true, message: '请输入产品名', trigger: 'blur'}
                    ],
                    logo: [
                        {required: true, message: '请上传图片', trigger: 'blur'}
                    ]
                },
                ruleForm: {
                    name: '',
                    code: ''
                },
                multipleSelection: [],
                // -----------------product detail------------------//
                detailDialogFormVisible:false,
                entityForm2: {
                    id: '',
                    description: '',
                    detailImgs: '',
                    imgs: '',
                },
                rules2: {
                    description: [
                        {required: true, message: '请输入产品描述', trigger: 'blur'}
                    ],
                },
                detailImgs:[],
                imgs:[],
                dialogImageUrl: '',
                dialogVisible: false,
                showImgArr:[],
                showDialog: false,
                // -----------------product detail------------------//   
            }
        },
        created(){
            this.rid = localStorage.getItem('rid');
            this.school = JSON.parse(localStorage.getItem('school'));
            this.shop = JSON.parse(localStorage.getItem('shop'));
            this.userData = JSON.parse(localStorage.getItem('userData'));
            this.editDialogFormVisible=false;
            this.detailDialogFormVisible=false;
            this.showDialog=false;
        },
        mounted(){
            if(this.school){
                this.listQuery.param.schoolId = this.school.schoolId
            }
            if(this.shop){
                // console.log(33)
                // console.log(this.shop)
                this.listQuery.param.shopName = this.shop.shopName
                this.listQuery.param.shopId = this.shop.shopId
            }
            this.getschoollist();
            this.getData();
            $(".el-dialog--large").css(
                "top","0%"
            );
        },
        methods: {
            handleCurrentChange(val){
                this.listQuery.pageNumber = val
                this.getData();
            },
            handleSizeChange(val){
                this.listQuery.pageSize = val
                this.getData();
            },
            getschoollist(){
                let self = this;
                let _data = {
                    pageNumber: 1,
                    pageSize: 10000,
                }
                self.myajax("/school/list",_data,function(res){
                    console.log(res)
                    if(res.code==1000){
                        self.schoolOptions=res.data.list;
                    }
                });
            },
            handleFilter(){
                this.listQuery.pageNumber = 1
                this.getData()
            },
            getData(){
                let self = this;
                self.myajax("/appraise/listAll",this.listQuery,function(data){
                    console.log(data)
                    if(data.code=1000){
                        self.tableData=data.data.list;
                        self.total=data.data.total;
                    }
                });
            },
            handleEdit(index, row) {
                let self = this;
                self.entityForm.id = row.id;
                self.entityForm.replyContent=row.reply_content;
                console.log(row.id);
                self.dialogVisible=true;
            },
            handleDelete(index, row) {
                this.del(row.id);
            },
            del(id) {
                var self=this;
                var ids = new Array();
                if (id) {
                    ids.push(id);
                }else{
                    if(self.multipleSelection.length==0){
                        self.$notify({title: '提示',message: '请先选择',type: 'warning'});
                        return;
                    }
                    for(var k in this.multipleSelection){
                        ids.push(this.multipleSelection[k].id);
                    }
                }

                self.$confirm('确定要删除这'+ ids.length +'项吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var data={ids:ids}; 
                    self.myajax("/appraise/delete",data,function(data){
                        var code=data.code;
                        if(code==1000){
                            self.$notify({title: '提示',message: "成功",type: 'success'});
                        }else{
                            self.$notify({title: '提示',message:data.msg,type: 'error'});
                        }
                        self.getData();
                    });
                });
            },
            add() {
                let self = this;
                self.dailogTitle = '添加产品';
                // self.entityForm = {};
                self.entityForm.id = "";
                self.entityForm.name = "";
                self.entityForm.price = "";
                self.entityForm.discountPrice = "";
                self.entityForm.stock = "";
                $("#logo").html("");
                self.editDialogFormVisible = true;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            update(id){            //回复评论
                var self=this;
                console.log(self.entityForm)
                self.myajax("/comment/updateIsAnonymous",self.entityForm,function(data){
                    console.log(data)
                    self.dialogVisible=false;
                });
            },
        }
    }
</script>

<style scoped>
    .left{
        float: left;
        padding-right:30px;
    }
    .filter-item{
        margin-bottom: 20px;
    }
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    span {
        white-space:normal;
    }
    img{
        max-width: 100%;
    }
    .imgs{
        width:200px;
        height:260px;
        float: left;
    }
</style>
